body {
   height: 100vh;
   display: flex;
   flex-direction: column;
   // position: absolute;
   background-color: hsla(0, 0%, 98%, 0.8);
   .ww {
      margin: 0 auto;
      width: 1380px;
   }
   main {
      flex: 1;
      padding-top: 16px;
      .floor-nav-top {
         margin: 0 auto;
         display: flex;
         padding-top: 20px;
         .floor-rank-right-top {
            flex: 1;
            height: 24px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            .host-move {
               flex: 1;
               overflow: hidden;
               position: relative;
               height: 100%;
               ul {
                  display: flex;
                  justify-content: space-around;
               }
            }
         }
      }
      .www-home-content {
         // background-color: blue;
         display: flex;
         justify-content: space-between;
         margin-top: 16px;
         .headlines {
            display: flex;
            height: 400px;
            border-radius: 2px;
            width: 100%;
            justify-content: space-between;
            .headlines-left {
               width: 420px;
               .top-title {
                  display: flex;
                  align-items: center;
                  margin-bottom: 16px;
                  height: 24px;
                  img {
                     width: 24px;
                     height: 24px;
                     margin-right: 4px;
                  }
                  h3 {
                     font-size: 18px;
                     font-weight: 700;
                     color: #222226;
                  }
               }
               dl {
                  dt {
                     img {
                        width: 100%;
                        border-radius: 2 px;
                     }
                  }
                  .desc {
                     font-size: 17px;
                     font-weight: 700;
                     color: #222226;
                  }
               }
               .desc {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  word-break: break-all;
               }
               .desc-text-a {
                  margin-top: 6px;
                  -webkit-line-clamp: 1;
                  font-size: 14px;
                  color: #999;
               }
            }
            .headlines-right {
               .headswiper {
                  width: 300px;
                  // height: 100%;

                  .headswiper-top {
                     display: flex;
                     justify-content: space-between;
                     padding: 0 24px;
                     height: 24px;
                     line-height: 24px;
                     .top-title {
                        display: flex;
                        align-items: center;
                        img {
                           width: 24px;
                           height: 24px;
                           margin-right: 4px;
                        }
                        h3 {
                           font-size: 18px;
                           font-weight: 700;
                           color: #222226;
                        }
                     }
                     h3 {
                        font-size: 18px;
                        font-weight: 700;
                        color: #222226;
                     }
                     p {
                        display: flex;
                        align-items: center;
                        img {
                           width: 10px;
                           height: 20px;
                           cursor: pointer;
                           margin-right: 10px;
                        }
                     }
                  }
                  .headswiper-content {
                     padding: 0 24px;
                     .headswiper-item {
                        margin-top: 24px;
                        .title {
                           color: #222226;
                           font-size: 16px;
                           overflow: hidden;
                           text-overflow: ellipsis;
                           display: -webkit-box;
                           -webkit-line-clamp: 1;
                           -webkit-box-orient: vertical;
                           word-break: break-all;
                        }
                        strong {
                           font-weight: 700;
                        }
                        .name {
                           margin-top: 4px;
                           font-size: 14px;
                           color: #999;
                           overflow: hidden;
                           text-overflow: ellipsis;
                           display: -webkit-box;
                           -webkit-line-clamp: 1;
                           -webkit-box-orient: vertical;
                           word-break: break-all;
                        }
                        &:first-child {
                           margin-top: 16px;
                        }
                     }
                  }
                  .headswiper-content > div {
                     height: 340px;
                  }
               }
            }
            .gg {
               width: 320px;
               img {
                  width: 100%;
               }
            }
         }
         .broadcast-active {
            width: 290px;
         }
      }
      .www-home {
         background: #fff;
         padding-top: 16px;
         .www-home-left {
            padding: 0 32px;
            display: flex;
            flex: 1;
            flex-direction: column;
            .www-content {
               height: auto;
               flex: 1;
               background: #fff;
               border-radius: 2px;
               margin-bottom: 20px;
               .www-content_top {
                  height: 48px;
                  display: flex;
                  align-items: center;
                  border-bottom: 1px solid #f0f0f2;
                  li {
                     font-size: 16px;
                     color: #999aaa;
                     margin-right: 56px;
                     position: relative;
                     line-height: 56px;
                     cursor: pointer;
                     &.active {
                        color: #222226;
                     }
                  }
                  .move {
                     flex: 1;
                     display: flex;
                     margin-right: 0;
                     justify-content: flex-end;
                     align-items: baseline;
                     cursor: default;
                     a {
                        display: flex;
                        align-items: baseline;
                        color: #999aaa;
                        font-size: 16px;
                        font-weight: 400;
                        .el-icon-arrow-right {
                           display: inline-block;
                           width: 16px;
                           height: 16px;
                        }
                     }
                  }
               }
               .Community {
                  width: 100%;
                  padding-top: 8px;
                  .option {
                     padding: 16px;
                     border-bottom: 1px solid #f0f0f2;
                     &:hover {
                        background: #fafafa;
                     }
                     .title {
                        display: inline-block;
                        color: #222226;
                        font-size: 18px;
                        margin-bottom: 8px;
                        &:hover {
                           text-decoration: underline;
                        }
                     }
                     .info {
                        display: flex;
                        .cover {
                           width: 134px;
                           height: 84px;
                           flex-shrink: 0;
                           display: block;
                           img {
                              width: 100%;
                              height: 100%;
                           }
                        }
                        .text {
                           margin-left: 16px;
                           display: flex;
                           flex-direction: column;
                           justify-content: space-between;
                           .abstract {
                              font-size: 14px;
                              color: #999;
                              word-break: break-word;
                              display: -webkit-box;
                              -webkit-box-orient: vertical;
                              -webkit-line-clamp: 2;
                              overflow: hidden;
                           }
                           .info_count {
                              display: flex;
                              font-size: 14px;
                              color: #999;
                              height: 21px;
                              line-height: 21px;
                              .agree {
                                 display: inline-block;
                                 height: 100%;
                                 display: flex;
                                 padding: 0 3px;
                                 .img_1 {
                                    display: none;
                                 }
                                 &.active {
                                    color: #fc5531;
                                    .img_0 {
                                       display: none;
                                    }
                                    .img_1 {
                                       display: inline-block;
                                    }
                                 }
                                 .agree_count {
                                    padding: 0 3px;
                                 }
                                 img {
                                    height: 18px;
                                 }
                              }
                              .g {
                                 margin: 0 8px;
                              }
                           }
                        }
                     }
                  }
               }
            }
         }
         .www-home-right {
            width: 320px;

            margin-left: 32px;
            // background-color: blue;
            .www-home-silde {
               width: 100%;
               height: 100%;
               // background-color: blueviolet;
               .ContentBlock {
                  margin-bottom: 16px;
                  width: 100%;
                  // height: 100%;
                  box-sizing: border-box;
                  border-radius: 2px;
                  border: 1px solid #f0f0f2;
                  padding: 2px 24px 16px;
                  // background-color: red;
                  .ContentBlockItem {
                     margin-top: 14px;
                     .top {
                        display: flex;
                        align-items: center;
                        cursor: pointer;
                        .left {
                           width: 28px;
                           height: 28px;
                        }
                        .title {
                           flex: 1;
                           font-size: 15px;
                           font-weight: 400;
                           color: #222226;
                           margin-left: 8px;
                        }
                        .right {
                           color: #999aaa;
                           transition: all 0.5s;
                        }
                     }
                  }
               }
               .broadcast {
                  margin-bottom: 16px;
                  border-radius: 2px;
                  background: #fff;
                  border: 1px solid #f0f0f2;
                  .title {
                     padding: 0 24px;
                     height: 48px;
                     box-shadow: 0 1px 0 0 #f0f0f2;
                     border-radius: 2px 2px 0 0;
                     line-height: 48px;
                     display: flex;
                     align-items: center;
                     .top-title {
                        display: flex;
                        align-items: center;
                        img {
                           width: 24px;
                           height: 24px;
                           margin-right: 4px;
                        }
                        h3 {
                           display: inline-block;
                           font-size: 18px;
                           font-weight: 700;
                           color: #222226;
                        }
                     }
                     a {
                        display: flex;
                        align-items: baseline;
                        color: #999aaa;
                        font-size: 16px;
                        font-weight: 400;
                        margin-left: auto;
                     }
                  }
                  .content {
                     padding: 0 24px 24px;
                     padding-bottom: 28px;
                     .www_live_item {
                        margin-top: 16px !important;
                        a {
                           display: flex;
                           .www_live_item_top {
                              height: 70px;
                              border-radius: 2px;
                              overflow: hidden;
                              position: relative;
                              .img {
                                 width: 120px !important;
                                 height: 68px !important;
                                 background-size: cover;
                                 background-position: 50%;
                              }
                              .live-type {
                                 position: absolute;
                                 top: 4px;
                                 left: 4px;
                                 height: 20px;
                                 width: 78px;
                              }
                              .live-text {
                                 position: absolute;
                                 font-size: 12px;
                                 top: 6px;
                                 left: 26px;
                                 color: #fff;
                              }
                              .back {
                                 position: absolute;
                                 bottom: 0;
                                 width: 100%;
                                 height: 28px;
                                 background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6));
                              }
                              .hover_mask {
                                 transition: all 0.3s;
                                 opacity: 0;
                                 border-radius: 4px 4px 0 0;
                                 // position: relative;
                                 width: 100%;
                                 height: 100%;
                                 position: absolute;
                                 top: 0;
                                 left: 0;
                                 background-color: rgba(0, 0, 0, 0.4);
                                 img {
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    width: 32px;
                                    height: 32px;
                                    margin-left: -16px;
                                    margin-top: -16px;
                                    opacity: 0;
                                    transition: all 0.3s;
                                    transform-origin: 50% 50%;
                                    transform: scale(2);
                                 }
                              }
                           }
                           .content-text {
                              flex: 1;
                              margin-left: 8px;
                              display: flex;
                              flex-direction: column;
                              justify-content: space-between;
                              h3 {
                                 margin-top: 0 !important;
                                 font-size: 14px;
                                 font-weight: 400;
                                 height: 40px;
                                 color: #222226;
                                 line-height: 20px;
                                 overflow: hidden;
                                 text-overflow: ellipsis;
                                 display: -webkit-box;
                                 word-break: break-all;
                              }
                              .text {
                                 height: 18px;
                                 // margin-top: 8px;
                                 font-size: 14px;
                                 font-weight: 400;
                                 color: #999aaa;
                              }
                           }
                        }
                     }
                  }
               }
               .www-home-silde-top {
                  width: 288px;
                  height: 121px;
                  margin-bottom: 16px;
                  border-right: 2px;
                  border: 1px solid #f0f0f2;
               }
               .calendar {
                  margin-bottom: 16px;
                  background: #fff;
                  border: 1px solid #f0f0f2;
                  border-radius: 2px;
                  .compont-title {
                     display: flex;
                     justify-content: space-between;
                     .top-title {
                        display: flex;
                        align-items: center;
                        h3 {
                           display: inline-block;
                           font-size: 18px;
                           font-weight: 700;
                           color: #222226;
                        }
                     }
                     a {
                        color: #999aaa;
                     }
                  }
                  .calendar-content {
                     padding: 0 24px 16px;
                     .calendar-content-item {
                        margin-left: -4px;
                        margin-top: 16px;
                        display: flex;
                        align-items: center;
                        .calendar-titme {
                           margin-right: 6px;
                           width: 34px;
                           p {
                              margin: 0;
                              font-family: DINCond-Black;
                              color: #ccccd8;
                              text-align: center;
                              font-size: 24px;
                              height: 26px;
                              line-height: 26px;
                           }
                           .color {
                              height: 22px;
                              line-height: 20px;
                              font-size: 14px;
                              font-family: PingFang SC;
                           }
                        }
                        .calendar-title {
                           flex: 1;
                           font-size: 14px;
                           font-weight: 400;
                           color: #222226;
                           overflow: hidden;
                           text-overflow: ellipsis;
                           display: -webkit-box;
                           word-break: break-all;
                           line-height: 24px;
                           height: 50px;
                           .icon_online {
                              margin-right: 4px;
                              display: inline-block;
                              font-size: 12px;
                              color: #fc5531;
                              padding: 0 4px;
                              height: 20px;
                              line-height: 20px;
                              background-color: rgba(252, 85, 49, 0.1);
                              border-radius: 2px;
                           }
                        }
                     }
                  }
               }
               .member {
                  margin-bottom: 16px;
                  background: #fff;
                  border-radius: 2px;
                  border: 1px solid #f0f0f2;
                  .compont-title {
                     display: flex;
                     justify-content: space-between;
                     .top-title {
                        display: flex;
                        align-items: center;
                        h3 {
                           display: inline-block;
                           font-size: 18px;
                           font-weight: 700;
                           color: #222226;
                        }
                     }
                     a {
                        color: #999aaa;
                     }
                  }
                  .member-content {
                     padding: 0 24px 24px;
                     .member-item {
                        position: relative;
                        margin-top: 16px;
                        a {
                           display: flex;
                        }
                        .image {
                           border-radius: 2px;
                           overflow: hidden;
                           img {
                              width: 120px;
                              height: 68px;
                           }
                        }
                        .tag {
                           margin: 0;
                           position: absolute;
                           top: 4px;
                           left: 4px;
                           width: 32px;
                           height: 16px;
                           background: linear-gradient(270deg, #f8c883, #fae8d0);
                           line-height: 17px;
                           text-align: center;
                           color: #69421b;
                           font-size: 12px;
                           border-radius: 2px;
                        }
                        .text {
                           margin-left: 8px;
                           font-size: 14px;
                           -webkit-box-flex: 1;
                           -ms-flex: 1;
                           flex: 1;
                           font-weight: 400;
                           color: #222226;
                           overflow: hidden;
                           text-overflow: ellipsis;
                           display: -webkit-box;
                           -webkit-line-clamp: 2;
                           -webkit-box-orient: vertical;
                           word-break: break-all;
                        }
                     }
                  }
               }
               .special {
                  border: 1px solid #f0f0f2;
                  margin-bottom: 16px;
                  background: #fff;
                  border-radius: 2px;
                  .compont-title {
                     display: flex;
                     justify-content: space-between;
                     .top-title {
                        display: flex;
                        align-items: center;
                        h3 {
                           display: inline-block;
                           font-size: 18px;
                           font-weight: 700;
                           color: #222226;
                        }
                     }
                     a {
                        color: #999aaa;
                     }
                  }
                  .special-content {
                     padding: 0 24px 24px;
                     .special-item {
                        position: relative;
                        margin-top: 20px;
                        a {
                           display: flex;
                           &:hover {
                              text-decoration: none;
                              color: #222226;
                              text-decoration: underline;
                           }
                           .image {
                              img {
                                 width: 120px;
                                 height: 68px;
                                 margin-right: 8px;
                                 border-radius: 2px;
                                 border: 1px solid #f5f6f7;
                              }
                           }
                        }
                        .text {
                           font-size: 14px;
                           font-weight: 400;
                           height: 42px;
                           color: #222226;
                           overflow: hidden;
                           text-overflow: ellipsis;
                           display: -webkit-box;
                           -webkit-line-clamp: 2;
                           -webkit-box-orient: vertical;
                           word-break: break-all;
                        }
                     }
                  }
               }
               .community {
                  margin-bottom: 16px;
                  border-radius: 2px;
                  background: #fff;
                  border: 1px solid #f0f0f2;
                  .community-content {
                     padding-bottom: 16px;
                     .community-item {
                        &:first-child {
                           padding-top: 16px;
                        }
                        display: flex;
                        padding: 16px 24px 0;
                        a {
                           img {
                              width: 40px;
                              height: 40px;
                              margin-right: 8px;
                              border: 1px solid #f5f6f7;
                              border-radius: 2px;
                           }
                        }
                        dl {
                           display: flex;
                           -webkit-box-orient: vertical;
                           -webkit-box-direction: normal;
                           -ms-flex-direction: column;
                           flex-direction: column;
                           -webkit-box-pack: center;
                           -ms-flex-pack: center;
                           justify-content: center;
                           dd {
                              a {
                                 font-size: 14px;
                                 font-weight: 400;
                                 color: #222226;
                                 overflow: hidden;
                                 text-overflow: ellipsis;
                                 display: -webkit-box;
                                 -webkit-line-clamp: 2;
                                 -webkit-box-orient: vertical;
                                 word-break: break-all;
                                 &:hover {
                                    text-decoration: none;
                                    color: #222226;
                                    text-decoration: underline;
                                 }
                              }
                           }
                           dt {
                              margin-top: 4px;
                              font-size: 12px;
                              font-weight: 400;
                              color: #999aaa;
                              span {
                                 margin-right: 24px;
                              }
                           }
                        }
                     }
                  }
               }
               .links {
                  background: #fff;
                  margin-bottom: 16px;
                  border-radius: 2px;
                  border: 1px solid #f0f0f2;
                  .content {
                     padding: 0 8px 24px 24px;
                     display: flex;
                     flex-wrap: wrap;
                     a {
                        padding: 6px 12px;
                        margin-right: 16px;
                        border-radius: 2px;
                        font-size: 14px;
                        border: 1px solid #e8e8ed;
                        margin-top: 16px;
                        font-weight: 400;
                        color: #555666;
                        &:hover {
                           border-color: #555666;
                           text-decoration: none;
                           // color: #0056b3;
                           // text-decoration: underline;
                        }
                     }
                  }
               }
               .so-questionnaire {
                  padding: 16px;
                  width: 88%;
                  background-color: #fff;
                  z-index: 11 !important;
                  border-radius: 2px;
                  .sq-main {
                     .sq-hd {
                        color: #222226;
                        font-size: 15px;
                        text-align: center;
                        font-weight: 700;
                     }
                     .sq-bd {
                        margin-top: 24px;
                        ul {
                           display: flex;
                           align-items: center;
                           justify-content: center;
                           li {
                              -webkit-box-flex: 0;
                              -ms-flex: 0 0 56px;
                              flex: 0 0 56px;
                              cursor: pointer;
                              .icon {
                                 position: relative;
                                 display: block;
                                 width: 34px;
                                 height: 34px;
                                 margin: 0 auto 12px;
                                 background-size: 34px !important;
                              }
                              .w {
                                 background-image: url(../image/强烈不推荐.png);
                                 background-repeat: no-repeat;
                              }
                              .a {
                                 background-image: url(../image/不推荐.png);
                                 background-repeat: no-repeat;
                              }
                              .b {
                                 background-image: url(../image/无所谓.png);
                                 background-repeat: no-repeat;
                              }
                              .c {
                                 background-image: url(../image/推荐.png);
                                 background-repeat: no-repeat;
                              }
                              .d {
                                 background-image: url(../image/强烈推荐.png);
                                 background-repeat: no-repeat;
                              }
                              .text {
                                 user-select: none;
                                 display: block;
                                 color: #555666;
                                 font-size: 12px;
                                 text-align: center;
                              }
                           }
                        }
                     }
                  }
               }
               .blog-rank-footer {
                  margin-top: 16px;
                  background: #fff;
                  border-right: 2px;
                  #csdn-copyright-footer.side {
                     box-sizing: border-box;
                     width: 100%;
                     max-width: 334px;
                     padding: 16px;
                     background: #fff;
                     // font-family: PingFang SC, Hiragino Sans GB, Arial, Microsoft YaHei, Verdana, Roboto, Noto, Helvetica Neue,
                     //     sans-serif !important;
                     .copyright-footer-contact {
                        color: #999aaa;
                        font-size: 14px;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        flex-wrap: wrap;
                        .work-time {
                           -ms-flex-preferred-size: auto;
                           flex-basis: auto;
                           word-break: break-all;
                           white-space: nowrap;
                           .link {
                              margin-left: 10px;
                           }
                        }
                     }
                     .copyright-footer-contact > div {
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                        -ms-flex-preferred-size: 122px;
                        flex-basis: 122px;
                        margin-bottom: 12px;
                        height: 16px;
                     }
                     .copyright-footer-middle {
                        padding: 12px 3px;
                        border-top: 1px solid #f3f3f3;
                        border-bottom: 1px solid #f3f3f3;
                        display: flex;
                        justify-content: space-between;
                        li {
                           height: 18px;
                           line-height: 18px;
                        }
                     }
                  }
                  .copyright-footer-info {
                     margin-right: -8px;
                     margin-top: 2px;
                     display: -webkit-box;
                     display: -ms-flexbox;
                     display: flex;
                     -ms-flex-wrap: wrap;
                     flex-wrap: wrap;
                     li {
                        color: #999aaa;
                        font-size: 14px;
                        line-height: 16px;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        align-items: center;
                        margin-right: 8px;
                        margin-top: 10px;
                     }
                  }
               }
               .compont-title {
                  height: 48px;
                  box-shadow: 0 1px 0 0 #f0f0f2;
                  border-radius: 2px 2px 0 0;
                  // line-height: 48px;
                  background: #fff;
                  padding: 0 24px;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  .top-title {
                     display: flex;
                     align-items: center;
                  }
                  h3 {
                     display: inline-block;
                     font-size: 18px;
                     font-weight: 700;
                     color: #222226;
                     margin: 0;
                     padding: 0;
                  }
               }
            }
         }
      }
      .www_live_item.active {
         height: auto !important;
         .www_live_item_top {
            width: 120px;
         }
      }
      .el-icon-arrow-right {
         display: inline-block;
         width: 16px;
         height: 16px;
      }
      .www-home {
         box-sizing: border-box;
         display: flex;
         justify-content: space-between;
      }
      .headlines-left .desc {
         margin-top: 8px;
         -webkit-line-clamp: 2;
      }
      .headlines .headlines-right {
         display: flex;
      }
      .broadcast-active {
         width: 338px;
         // height: 400px;
         border-radius: 2px;
         overflow: hidden;
      }
   }
   .www-content-top-tooltip {
      padding: 10px !important;
      margin-bottom: 0 !important;
      min-width: 10px !important;
      color: #555666 !important;
      font-size: 14px !important;
      border-radius: 4px !important;
   }
}
